﻿#earth {
    position: relative;
    width: 300px;
    height: 300px;
    margin-top: 5%;
    margin-left: 29%;
    background: url(/Content/Images/Earth.jpg) 0 0 repeat;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-size: 630px;
    animation: rotate 4s linear infinite;
    -webkit-animation: rotate 4s linear infinite;
    -moz-animation: rotate 4s linear infinite;
    -ms-animation: rotate 4s linear infinite;
    -o-animation: rotate 4s linear infinite;
    -webkit-transition: -webkit-transform 200ms linear;
    -webkit-transform-style: preserve-3d;
    -moz-transition: -moz-transform 200ms linear;
    -moz-transform-style: preserve-3d;
    transition: transform 200ms linear;
    transform-style: preserve-3d;
    box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
    -moz-box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
    -webkit-box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
    color: #000;
}

@media screen and (max-width: 990px) {
   #earth {
        /*margin-left: 18%;*/
        margin-right: auto;margin-left: auto;

   }
  
}

    #earth:after {
        content: "";
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
        -moz-box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
        -webkit-box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
    }

    #earth:before {
        content: "";
        position: absolute;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0.2;
        background: radial-gradient(circle at 100px 100px, #fff, #000);
    }

@keyframes rotate {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 630px 0;
    }
}

@-moz-keyframes rotate {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 630px 0;
    }
}

@-webkit-keyframes rotate {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 630px 0;
    }
}

@-ms-keyframes rotate {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 630px 0;
    }
}

@-o-keyframes rotate {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 630px 0;
    }
}
